<template>
    <div id="gojs_page">
        <!-- 顶部图标 -->
        <div class="gojs_page_header">
            <!-- <i class="el-icon-view" title="查看JSON数据" @click="save"></i>
            <i
                class="el-icon-document-add"
                title="新建"
                @click="drawingNew"
            ></i>
            <i class="el-icon-caret-top" title="上移" @click="move('up')"></i>
            <i
                class="el-icon-caret-bottom"
                title="下移"
                @click="move('down')"
            ></i>
            <i
                class="el-icon-caret-left"
                title="左移"
                @click="move('left')"
            ></i>
            <i
                class="el-icon-caret-right"
                title="右移"
                @click="move('right')"
            ></i>
            <i
                class="el-icon-refresh-right"
                title="旋转+45°"
                @click="changeAngle('+')"
            ></i>
            <i
                class="el-icon-refresh-left"
                title="旋转-45°"
                @click="changeAngle('-')"
            ></i> -->
            <i
                class="el-icon-full-screen"
                title="满屏显示"
                @click="showAll"
            ></i>
            <i
                class="el-icon-zoom-in"
                title="放大"
                @click="zoomChange('+')"
            ></i>
            <i
                class="el-icon-zoom-out"
                title="缩小"
                @click="zoomChange('-')"
            ></i>
            <i
                class="el-icon-refresh"
                title="还原大小"
                @click="zoomChange(1)"
            ></i>
            <!-- <i class="el-icon-back" title="后退" @click="redoAndUndo('un')"></i>
            <i
                class="el-icon-right"
                title="前进"
                @click="redoAndUndo('re')"
            ></i> -->
        </div>
        <div class="gojs_page_content">
            <!-- 左侧调色板 -->
            <!-- <div class="gojs_page_left">
                <el-tabs v-model="imgActiveName" @tab-click="handleClick">
                    <el-tab-pane label="基础" name="railway">
                        <div id="myPaletteDiv">
                            <canvas
                                tabindex="0"
                                width="100"
                                height="750"
                                style="
                                    position: absolute;
                                    top: 0px;
                                    left: 0px;
                                    z-index: 2;
                                    user-select: none;
                                    width: 100px;
                                    height: 750px;
                                    cursor: auto;
                                "
                                >如果浏览器不支持Canvas
                                HTML元素，则显示此文本。</canvas
                            >
                            <div
                                style="
                                    position: absolute;
                                    overflow: auto;
                                    width: 100px;
                                    height: 750px;
                                    z-index: 1;
                                "
                            >
                                <div
                                    style="
                                        position: absolute;
                                        width: 1px;
                                        height: 1px;
                                    "
                                ></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="供电" name="power">
                        <div id="powerPaletteDiv">
                            <canvas
                                tabindex="0"
                                width="100"
                                height="750"
                                style="
                                    position: absolute;
                                    top: 0px;
                                    left: 0px;
                                    z-index: 2;
                                    user-select: none;
                                    width: 100px;
                                    height: 750px;
                                    cursor: auto;
                                "
                                >如果浏览器不支持Canvas
                                HTML元素，则显示此文本。</canvas
                            >
                            <div
                                style="
                                    position: absolute;
                                    overflow: auto;
                                    width: 100px;
                                    height: 750px;
                                    z-index: 1;
                                "
                            >
                                <div
                                    style="
                                        position: absolute;
                                        width: 1px;
                                        height: 1px;
                                    "
                                ></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="工务" name="work">
                        <div>工务</div>
                    </el-tab-pane>
                    <el-tab-pane label="电务" name="telecommunications">
                        <div>电务</div>
                    </el-tab-pane>
                </el-tabs>
            </div> -->
            <!-- 中间画图区 -->
            <div
                class="middle-box"
                v-loading="isShow"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <div id="myDiagramDiv" class="gojs_page_middle">
                    <canvas
                        tabindex="0"
                        width="804"
                        height="750"
                        style="
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            z-index: 2;
                            user-select: none;
                            width: 804px;
                            height: 750px;
                            cursor: auto;
                        "
                        >如果浏览器不支持Canvas HTML元素，则显示此文本。</canvas
                    >
                    <div
                        style="
                            position: absolute;
                            overflow: auto;
                            width: 804px;
                            height: 750px;
                            z-index: 1;
                        "
                    >
                        <div
                            style="position: absolute; width: 1px; height: 1px"
                        ></div>
                    </div>
                </div>
                <!-- <div class="sacle-box">{{scaleGraphicalValue}}m</div> -->
            </div>
            <!-- 缩略图 -->
            <div id="myOverviewDiv"></div>
            <!-- 右侧属性兰 -->
            <!-- <div class="gojs_page_right">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="节点信息" name="first">
                        <div style="margin-top: 10px">
                            <span>ID</span>
                            <el-input
                                v-model="formData.key"
                                disabled
                                placeholder="请输入内容"
                            ></el-input>
                        </div>
                        <div style="margin-top: 10px">
                            <span>名称</span>
                            <el-input
                                v-model="formData.nodeName"
                                disabled
                                placeholder="请输入内容"
                            ></el-input>
                        </div>
                        <div style="margin-top: 10px" v-if="formData.category==='circularLight'">
                            <span>灯状态</span>
                            <el-select
                                v-model="formData.lightState"
                                placeholder="请选择"
                                @change="(val)=> onChangeLightState(val,'lightState')"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                        <div style="margin-top: 10px" v-if="formData.category==='straightLine'">
                            <span>股道类型</span>
                            <el-select
                                v-model="formData.trackType"
                                placeholder="请选择"
                                @change="(val)=> onChangeLightState(val,'trackType')"
                            >
                                <el-option
                                    v-for="item in trackOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="自定义信息" name="third">
                        <div style="margin-top: 10px">
                            <span>自定义信息</span>
                            <el-input
                                v-model="formData.customData"
                                placeholder="请输入内容"
                            ></el-input>
                        </div>
                        <div style="margin-top: 10px">
                            <el-button
                                @click="saveCustomData(formData.customData)"
                                >保存</el-button
                            >
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div> -->
        </div>
        <!-- 数据弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="450">
            <textarea
                v-model="jsonData"
                style="width: 100%; height: 300px"
            ></textarea>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getUrlKey, getDataByCustomApi } from "@/tools/index.js";
// import { getDeviceListByType1 } from "@/api/publicApi.js";
import "../../gojs/go.min.js"; //引入gojs
import "../EnlargeFile/Figures"; //引入gojs预定义图形
import gojsData from "./data.json"; //初始图形数据
import Mixin from "./mixin";
export default {
    data() {
        return {
            isShow: false,
            mapData: {},
            options: [
                {
                    value: "1",
                    label: "白色",
                },
                {
                    value: "2",
                    label: "黄色",
                },
                {
                    value: "3",
                    label: "红色",
                },
                {
                    value: "4",
                    label: "绿色",
                },
                {
                    value: "5",
                    label: "蓝色",
                },
            ],
            trackOptions: [
                {
                    value: "commonLine",
                    label: "普通线",
                },
                {
                    value: "specialLine",
                    label: "专用线",
                },
            ],
            renderPower: true, //是否渲染供电图例
            formData: {}, //接收所选择的节点对象
            activeName: "first", //右侧属性默认页签
            imgActiveName: "railway", //默认选中的图例页签
            dialogVisible: false,
            jsonData: "", //画布中图形所产生的数据
            myDiagram: null, //中间画布区
            myPalette: null, //调色板
        };
    },
    mixins: [Mixin],
    mounted() {
        this.init();
    },
    methods: {
        onChangeLightState(val, key) {
            let _this = this;
            let nodeOrLinkList = this.myDiagram.selection; //用例获取选中的节点或线
            nodeOrLinkList.each(function (nodeOrLink) {
                _this.myDiagram.model.commit(function (m) {
                    m.set(nodeOrLink.data, key, val);
                    _this.updateDiagramFromData();
                }, "flash");
            });
        },
        //保存自定义信息
        saveCustomData(val) {
            let _this = this;
            let nodeOrLinkList = this.myDiagram.selection; //用例获取选中的节点或线
            nodeOrLinkList.each(function (nodeOrLink) {
                _this.myDiagram.model.commit(function (m) {
                    m.set(nodeOrLink.data, "customData", val);
                }, "flash");
            });
            this.$message.success("操作成功");
        },
        /**改变标签页 */
        handleClick(tab, event) {
            // console.log(tab, event);
            if (tab.name == "power" && this.renderPower) {
                this.renderPower = false;
                let $ = go.GraphObject.make; // 为了定义模板的简洁性
                //供电图例
                let _this = this;
                // 这是默认动画的重新实现，只是它从下而不是向上淡入。
                this.myPalette = $(
                    go.Palette,
                    "powerPaletteDiv", // 必须命名或引用DIV HTML元素
                    {
                        // 使用自定义淡入淡出而不是默认动画
                        "animationManager.initialAnimationStyle":
                            go.AnimationManager.None,
                        InitialAnimationStarting: _this.animateFadeDown, // 相反，使用此函数设置动画
                        nodeTemplateMap: _this.myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板，这样左侧调色板中的图就和拖拽出的图一致了
                        initialScale: 0.7, //图形尺寸
                        hoverDelay: 40, // 控制在显示装饰之前静止等待的时间（毫秒）
                        model: new go.GraphLinksModel([
                            {
                                category: "sectionInsulator",
                                text: "分段绝缘器",
                                nodeName: "分段绝缘器",
                                legendType: "powerSupply", //图例类型
                                angle: 0,
                                size: "10 15",
                            },
                            {
                                category: "openTheEquipment",
                                text: "绝缘锚段关节",
                                nodeName: "绝缘锚段关节",
                                legendType: "powerSupply", //图例类型
                                angle: 0,
                            },
                            {
                                category: "insulatedAnchorSectionJoint",
                                text: "敞开隔离开关",
                                nodeName: "敞开隔离开关",
                                legendType: "powerSupply", //图例类型
                                isOpen: true,
                                angle: 0,
                                sourceKey: null,
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },

                            {
                                category: "normallyOpenRemoteDisconnector",
                                text: "常开远动隔离开关",
                                nodeName: "常开远动隔离开关",
                                legendType: "powerSupply", //图例类型
                                isOpen: true,
                                sourceKey: null,
                                angle: 0,
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "normallyClosedDisconnector",
                                text: "带接地刀闸 常闭隔离开关",
                                nodeName: "带接地刀闸 常闭隔离开关",
                                legendType: "powerSupply", //图例类型
                                isOpen: true,
                                sourceKey: null,
                                angle: 0,
                                size: "50 60",
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "switchingStation",
                                text: "开闭所",
                                nodeName: "开闭所",
                                legendType: "powerSupply", //图例类型
                                angle: 0,
                                sourceKey: "self",
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "NonElectrifiedRailway",
                                text: "非电气化铁路",
                                nodeName: "非电气化铁路",
                                legendType: "powerSupply", //图例类型
                                angle: 0,
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "splitPhaseInsulator",
                                text: "分相绝缘器",
                                nodeName: "分相绝缘器",
                                legendType: "powerSupply", //图例类型
                                angle: 0,
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "OCSWorkArea",
                                text: "接触网工区",
                                nodeName: "接触网工区",
                                legendType: "powerSupply", //图例类型
                                size: "150 100",
                                angle: 0,
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "substation",
                                text: "变电所",
                                nodeName: "变电所",
                                legendType: "powerSupply", //图例类型
                                sourceKey: "self",
                                size: "150 100",
                                angle: 0,
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                            {
                                category: "districtKiosk",
                                text: "分区亭",
                                nodeName: "分区亭",
                                legendType: "powerSupply", //图例类型
                                angle: 0,
                                sourceKey: "self",
                                size: "150 100",
                                leftArray: [
                                    {
                                        portColor: "#fae3d7",
                                        portId: "left0",
                                    },
                                ],
                                topArray: [
                                    {
                                        portColor: "#d6effc",
                                        portId: "top0",
                                    },
                                ],
                                bottomArray: [
                                    {
                                        portColor: "#ebe3fc",
                                        portId: "bottom0",
                                    },
                                ],
                                rightArray: [
                                    {
                                        portColor: "#fadfe5",
                                        portId: "right1",
                                    },
                                ],
                            },
                        ]),
                    }
                );
            }
        },
        /** 新建图形 */
        drawingNew() {
            let newdata = {
                class: "go.GraphLinksModel",
                linkFromPortIdProperty: "fromPort",
                linkToPortIdProperty: "toPort",
                nodeDataArray: [],
                linkDataArray: [],
            };
            this.myDiagram.model = go.Model.fromJson(newdata);
        },
        /** 这是默认动画的重新实现，只是它从下而不是向上淡入。 */
        animateFadeDown(e) {
            let diagram = e.diagram;
            let animation = new go.Animation();
            animation.isViewportUnconstrained = true; // 所以图表定位规则让动画从屏幕上开始
            animation.easing = go.Animation.EaseOutExpo;
            animation.duration = 900;
            // 淡入，换句话说，从上面淡入
            animation.add(
                diagram,
                "position",
                diagram.position.copy().offset(0, 200),
                diagram.position
            );
            animation.add(diagram, "opacity", 0, 1);
            animation.start();
        },
        /** 前进、后退 */
        redoAndUndo(type) {
            type == "re"
                ? this.myDiagram.undoManager.redo()
                : this.myDiagram.undoManager.undo();
        },
        /** 满屏显示 */
        showAll() {
            this.myDiagram.zoomToFit();
        },
        /** 缩放 */
        zoomChange(val) {
            if (val === "-") {
                this.myDiagram.scale -= 0.1;
            } else if (val === "+") {
                this.myDiagram.scale += 0.1;
            } else {
                this.myDiagram.scale = 1;
            }
            let nodeOrLinkList = this.myDiagram.selection; //获取选中的节点或线
            if (nodeOrLinkList.Ue) {
                let key = nodeOrLinkList.Ue.key.data.key;
                this.myDiagram.scrollToRect(
                    this.myDiagram.findNodeForKey(key).actualBounds
                );
            }
        },
        /** 以JSON格式显示图表的模型 */
        save() {
            this.jsonData = this.myDiagram.model.toJson();
            this.dialogVisible = true;
        },
        /** 将数据渲染成图形 */
        load(val) {
            this.myDiagram.model = go.Model.fromJson(
                val ? this.mapData : gojsData
            ); //
            this.myDiagram.zoomToFit();
        },
        /** 上下左右移动 */
        move(dir) {
            let nodeOrLinkList = this.myDiagram.selection; //获取选中的节点或线
            let _this = this;
            nodeOrLinkList.each(function (nodeOrLink) {
                let nodeData = nodeOrLink.data;
                let x = Number(nodeData.loc.split(" ")[0]),
                    y = Number(nodeData.loc.split(" ")[1]);
                switch (dir) {
                    case "left":
                        x -= 1;
                        break;
                    case "up":
                        y -= 1;
                        break;
                    case "right":
                        x += 1;
                        break;
                    case "down":
                        y += 1;
                        break;
                    default:
                        break;
                }
                //所有模型更改都应该发生在事务中
                _this.myDiagram.model.commit(function (m) {
                    m.set(nodeData, "loc", x + " " + y);
                }, "flash");
            });
        },
        /** 旋转 */
        changeAngle(type) {
            let nodeOrLinkList = this.myDiagram.selection; //用例获取选中的节点或线
            let _this = this;
            nodeOrLinkList.each(function (nodeOrLink) {
                let nodeData = nodeOrLink.data;
                let a = nodeData.angle;
                switch (type) {
                    case "-":
                        a -= 45;
                        break;
                    case "+":
                        a += 45;
                        break;
                    default:
                        break;
                }
                //所有模型更改都应该发生在事务中
                _this.myDiagram.model.commit(function (m) {
                    m.set(nodeData, "angle", a);
                }, "flash");
            });
        },
        /**改变颜色 */
        colorChange(val) {
            this.publicChange("stroke", val || "#fff");
        },
        /**改变当前选中节点属性的公用方法 */
        publicChange(type, val) {
            let nodeOrLinkList = this.myDiagram.selection; //用例获取选中的节点或线
            let _this = this;
            nodeOrLinkList.each(function (nodeOrLink) {
                let nodeData = nodeOrLink.data;
                //所有模型更改都应该发生在事务中
                _this.myDiagram.model.commit(function (m) {
                    type == "size"
                        ? m.set(nodeData, type, val + " 0")
                        : m.set(nodeData, type, val);
                }, "flash");
            });
        },
        /**改变长度 */
        widthChange(val) {
            this.publicChange("size", val);
        },
        /**改变角度 */
        angleChange(val) {
            this.publicChange("angle", val);
        },
        /**更新视图 */
        updateDiagramFromData() {
            this.myDiagram.startTransaction();
            this.myDiagram.updateAllRelationshipsFromData();
            this.myDiagram.updateAllTargetBindings();
            this.myDiagram.commitTransaction("updated");
        },
        getUrlData() {
            let code = getUrlKey("url", window.location.href);
            if (code) {
                let url = decodeURIComponent(window.atob(code));
                this.isShow = true;
                getDataByCustomApi(url).then((res) => {
                    console.log('返回数据：========>')
                    console.log(res.data)
                    if (res.status === 200) {
                        if (res.data.length) {
                            this.mapData = res.data[0];
                            this.$nextTick(() => {
                                this.load("render");
                            });
                        } else {
                            this.$nextTick(() => {
                                this.load();
                            });
                        }
                    }
                    this.isShow = false;
                });
            } else {
                this.$nextTick(() => {
                    this.load();
                });
            }
        },
    },
    created() {
        this.getUrlData();
    },
    beforeDestroy() {},
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>